{% extends "base.html" %}
{% load i18n %}
{% block head-css-ext %}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/blue/style.css" media="print, projection, screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.tablesorter.pager.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.alerts.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.tablesorter.pager.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.alerts.js"></script>
{% endblock %}

{% block head-js-embedded %}
    <script type="text/javascript">
        
        $(document).ready(function()
        {
	    $("#pedidos")		
            .tablesorter({widthFixed: true,  widgets: ['zebra'], headers: { 0:{sorter: false}, 1:{sorter: false}, 2:{sorter: false}, 3:{sorter: false} } })
            .tablesorterPager({container: $("#pager")});
	});        
    </script>
{% endblock %}




{% block content-box1 %}    
    {% if productos %}   
        <table id="pedidos" class="tablesorter">
            <thead>
                <tr align="center">
                    <th>Producto</th>
                    <th>cantidad</th>
                    <th>Valor Producto</>
		    
                </tr>            
            </thead>
            <tbody>
                {% for producto in productos %}               
                    <tr align="center">
                        <td>{{ producto.producto.descripcion}}</td>
			<td>{{ producto.cantidad }}</td>
                        <td>$ {{ producto.valor }}</td>
                    </tr>
                {% endfor %}
                <tr align="center">
                    <td></td>
                    <td></td>
                    <td>Valor total: $ {{ valor }}</td>
                </tr>
            </tbody>
        </table>
        <table border="0">

        </table>
        <div id="pager" class="pager">
            <form>
		<img src="{{MEDIA_URL}}img/icons/first.png" class="first"/>
		<img src="{{MEDIA_URL}}img/icons/prev.png" class="prev"/>
		<input type="text" class="pagedisplay"/>
		<img src="{{MEDIA_URL}}img/icons/next.png" class="next"/>
		<img src="{{MEDIA_URL}}img/icons/last.png" class="last"/>
		<select class="pagesize">
		    <option selected="selected"  value="10">10</option>
		    <option value="20">20</option>
		    <option value="30">30</option>
		    <option  value="40">40</option>
		</select>
            </form>
        </div>        
    {% else %}
        <p><b>No tiene pedidos activos relacionados</b></p>
    {% endif %}

{% endblock %}

{% block content-colum2 %}
    {% if user.is_authenticated %}
        <ul>
	    <li><a href="{% url pedidos %}">Pedidos</a></li>
            <li><a href="/pedidos/agregar-productos-pedido-cliente/{{ codigo }}/">Agregar Productos</a></li>	    	    
        </ul>
    {% endif %}   
{% endblock %}